<template>
	<view class="p-2">
		<uni-status-bar />
		<view class="p-2" @click="onBack">
			<text class="iconfont icon-guanbi" style="font-size: 45rpx;"></text>
		</view>
		<view class="mt-4">
			<view class="w-100 flex align-center justify-center">
				<text class="text-muted font-lg">{{loginStatus ? '手机验证码':'账号密码'}}登录</text>
			</view>
			<view class="mt-5 px-2">
				<template v-if="loginStatus">
					<view class="flex align-center border-bottom py-3">
						<text class="text-dark">+86</text>
						<input class="ml-2" type="tel" v-model="loginForm.phone" maxlength="11" placeholder="手机号"
							placeholder-class="text-light-muted" />
					</view>
					<view class="flex align-center border-bottom py-3">
						<input class="ml-2" type="tel" v-model="loginForm.code" maxlength="4" placeholder="请输入验证码"
							placeholder-class="text-light-muted" />
						<view class="flex align-center justify-center rounded ml-auto border px-2 "
							:class="loginForm.phone==='' || codeTime>0 ?'bg-muted text-muted':'bg-main text-white'"
							@click="getCode">
							{{codeTime>0 ?`已发送${codeTime}s`:'获取验证码'}}
						</view>
					</view>
				</template>
				<template v-if="!loginStatus">
					<view class="flex align-center border-bottom py-3">
						<input class="ml-2" type="tel" v-model="loginForm.username" maxlength="11"
							placeholder="昵称/手机号/邮箱" placeholder-class="text-light-muted" />
					</view>
					<view class="flex align-center border-bottom py-3">
						<input class="ml-2" type="tel" v-model="loginForm.password" maxlength="4" placeholder="请输入密码"
							placeholder-class="text-light-muted" />
						<view class="flex align-center justify-center ml-auto px-2 text-light-muted" @click="getCode">
							忘记密码
						</view>
					</view>
				</template>
				<button 
					class="mt-5 border-0 rounded-circle text-white" :class="isDisabled ? 'bg-main-disabled':'bg-main'"
					:disabled="isDisabled" :loading="loading" @click="onLogin">
					{{loading ? '登录中...':'登录'}}
				</button>
				<view class="flex align-center justify-center my-5">
					<view class="text-primary px-2" @click="onToggleLoginType">
						{{loginStatus ? '账号密码':'手机验证码'}}登录
					</view>
					<text class="mx-2" style="color: #dddddd;">|</text>
					<view class="text-primary px-2" @click="openUserPassword">登录出现问题</view>
				</view>
				<view class="flex align-center justify-center">
					<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
					<view class="text-light-muted mx-2">第三方登录</view>
					<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
				</view>
				<otherLogin />
				<view class="mt-3 flex align-center justify-center">
					<text class="text-light-muted">注册即代表您同意</text>
					<view class="text-link" @click="onOpenAgreement">《社区交友安全协议》</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue'
	import otherLogin from '@/components/common/other-login.vue' 
	export default {
		components: {
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				loading: false,
				loginStatus: true,
				loginForm: {
					phone: '',
					code: '',
					username: '',
					password: ''
				},
				codeTime: 0,
				socialButtons: [{
						name: 'weixin',
						iconId: 'icon-weixin',
						bgColor: '#2AD19B'
					},
					{
						name: 'qq',
						iconId: 'icon-QQ',
						bgColor: '#2CAEFC'
					},
					{
						name: 'weibo',
						iconId: 'icon-xinlangweibo',
						bgColor: '#FC772A'
					},
				]
			};
		},
		computed: {
			isDisabled() {
				if ((this.loginForm.phone === '' || this.loginForm.code === '') && (this.loginForm.username === '' || 
						this.loginForm.password === '')) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			// 打开用户协议
			onOpenAgreement() {
				uni.navigateTo({
					url:'/pages/user-agreement/user-agreement'
				})
			},
			// 打开修改密码
			openUserPassword() {
				uni.navigateTo({
					url:'/pages/user-password/user-password'
				})
			},
			validatePhone() {
				var mPattern = /^1[34578]\d{9}$/;
				if (!mPattern.test(this.loginForm.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false
				}
				// ...更多验证
				return true
			},
			// 返回
			onBack() {
				uni.navigateBack({
					delta:1
				})
			},
			initForm() {
				this.loginForm.phone = '';
				this.loginForm.code = '';
				this.loginForm.username = '';
				this.loginForm.password = '';
			},
			// 切换登录方式
			onToggleLoginType() {
				this.initForm();
				this.loginStatus = !this.loginStatus;
			},
			// 获取验证码
			getCode() {
				if (this.loginForm.phone === '') return;
				if (this.codeTime > 0) {
					return;
				}
				// 验证手机号
				if (!this.validatePhone()) return;
				console.log('1111')
				const data = {
					phone: this.loginForm.phone
				}
				this.$H.post('/user/sendcode',{phone:this.loginForm.phone},{native:true}).then(res=> {
					console.log('获取验证码res',res)
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					// 倒计时
					this.codeTime = 60;
					let timer = setInterval(() => {
						if (this.codeTime >= 1) {
							this.codeTime--
						} else {
							this.codeTime = 0;
							clearInterval(timer)
						}
					}, 1000)
				})
			},
			// 登录
			onLogin() {
				let url = '';
				let data = {}
				if(this.loginStatus) {
					if(!this.validatePhone()) return;
					url = '/user/phonelogin';
					data = {
						phone:this.loginForm.phone,
						code:this.loginForm.code
					}
				}else {
					url = '/user/login';
					data = {
						phone:this.loginForm.username,
						code:this.loginForm.password
					}
				}
				this.loading = true;
				this.$H.post(url,data).then(res=> {
					console.log('登录',res)
					// 修改vuex的state,持久化存储
					this.$store.commit('login',res)
					// 提示和跳转
					uni.navigateBack({
						delta: 1
					}); 
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
				}).finally(()=> {
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.social-button {
		width: 104rpx;
		height: 104rpx;
	}
</style>